<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 400PX;
				width: 400PX;
				background-color: #00FFFF;
				text-align: center;
			}
			#div2{
				height: 300PX;
				width: 300PX;
				background-color: #7FFFD4;
				text-align: center;
				margin: auto;
			}
			#div3{
				height: 200PX;
				width: 200PX;
				background-color: aqua;
				text-align: center;
				margin: auto;
			}
			#div4{
				height: 100PX;
				width: 100PX;
				background-color: #0000FF;
				text-align: center;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			朱元璋
			<div id="div2">
				朱棣
				<div id="div3">
					朱高炽
					<div id="div4">
						朱瞻基
					</div>
				</div>
			</div>
		</div>
		<button type="button" onclick="hqfatherys()">获取父类元素</button>
		<button type="button" onclick="hqfatherjd()">获取父类节点</button>
		<button type="button" onclick="hqzlysandjd()">获取子元素和子节点</button>
	</body>
	<script type="text/javascript">
	    // 获取父类元素
		function hqfatherys(){
			var divLayer4 = document.getElementById('div4');
				console.log(divLayer4.parentElement);
				console.log(divLayer4.parentElement.parentElement);
				console.log(divLayer4.parentElement.parentElement.parentElement);
				console.log(divLayer4.parentElement.parentElement.parentElement.parentElement);
				console.log(divLayer4.parentElement.parentElement.parentElement.parentElement.parentElement);
				console.log(divLayer4.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
		}
		// 获取父类节点
		function hqfatherjd(){
			var divLayer4 = document.getElementById('div4');
				console.log(divLayer4.parentNode);
				console.log(divLayer4.parentNode.parentNode);
				console.log(divLayer4.parentNode.parentNode.parentNode);
				console.log(divLayer4.parentNode.parentNode.parentNode.parentNode);
			    console.log(divLayer4.parentNode.parentNode.parentNode.parentNode.parentNode);
				console.log(divLayer4.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
		}
		// 获取子元素和子节点
		function hqzlysandjd(){
			    var div1 = document.getElementById('div1');
				var div2 = document.getElementById('div2');
				var div3 = document.getElementById('div3');
				var div4 = document.getElementById('div4');
				
				console.log(div1.children);
				console.log(div2.children);
				console.log(div3.children);
				console.log(div4.children);
				console.log(' ');
				console.log(div1.childNodes);
				console.log(div2.childNodes);
				console.log(div3.childNodes);
				console.log(div4.childNodes);
		}
	</script>
</html>
